<template>
  <div>
    <MedicalTable
      :visible.sync="isShowDetail"
      :records="records"
      @detailItem="item = $event"
    ></MedicalTable>
    <MedicalDetail
      :visible.sync="isShowDetail"
      :value="item"
      :index="item.id"
    ></MedicalDetail>
  </div>
</template>

<script>
import MedicalDetail from "./components/MedicalDetail.vue";
import MedicalTable from "./components/MedicalTable.vue";

export default {
  data() {
    return {
      records: [
        {
          id: 1,
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          id: 2,
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          id: 3,
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      isShowDetail: false,
      item: {},
    };
  },
  components: {
    MedicalTable,
    MedicalDetail,
  },
};
</script>
